<template>
  <div class="note-search" v-if="noteList">
    <div>
      <div class="left">
        <NoteItem
          v-for="(item, index) in showList[0]"
          :key="item.id + '' + index"
          :item="item"
        />
      </div>
      <div class="right">
        <NoteItem
          v-for="(item, index) in showList[1]"
          :key="item.id + '' + index"
          :item="item"
        />
      </div>
    </div>
  </div>
</template>

<script>
import NoteItem from "@/components/NoteItem.vue";
export default {
  components: {
    NoteItem,
  },
  props: ["noteList"],
  data: () => {
    return {
      leftHeight: 0,
      rightHeight: 0,
    };
  },
  computed: {
    showList() {
      let cat = [[], []];
      this.noteList.map((item) => {
        let width = item?.activity?.image_w || item?.note.image_w;
        let scale = width / 750;
        let height = item?.activity?.image_h || item?.note.image_h;
        height = Number.parseInt(height) / scale;
        if (this.leftHeight <= this.rightHeight) {
          cat[0].push(item);
          this.leftHeight += height;
        } else {
          cat[1].push(item);
          this.rightHeight += height;
        }
      });
      return cat;
    },
  },
  created() {
    console.log(this.noteList);
  },
};
</script>

<style lang="scss" scoped>
.note-search {
  width: 100%;
  padding: 0.2rem 0;
  > div {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    box-sizing: border-box;
  }
}
</style>